<template name="components">
  <view class="">
    <uni-nav-bar
      fixed
      title="部门下沉，共建一流"
      status-bar
      background-color="#2163e0"
      color="#fff"
      @clickLeft="back"
    />
    <scroll-view scroll-y class="page" @scrolltolower="onBottomingScroll">
      <view class="header-select">
        <view class="home-items" v-for="(item, index) in itemList" :key="index">
          <uni-data-select
            :placeholder="item.name"
            v-model="value[index]"
            :localdata="headerSelectGroup[index]"
            @change="onChange(value[index],index)"
          ></uni-data-select>
        </view>
      </view>
      <view class="home-content-list">
        <view
          class="list"
          v-for="(item, index) in matterList"
          :key="index"
          @click="detail(item)"
        >
          <view class="list-content">
            <uni-section
              :title="item.demandTitle"
              padding="0 0 5px 10px"
            >
              <view class="desc">
                {{
                  item.demandContent
                }}
              </view>
			  <view class="time">{{ item.deptName }}&nbsp;&nbsp;&nbsp;{{ item.createTime }}</view>
            </uni-section>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import * as api from '@/api/api';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: 'demand',
  components: {},
  data() {
    return {
      pageNo: 1,
      finished: false,
      loading: false,
      value: ['', '', ''],
      headerSelectGroup: [
        [],
        [],
        [
          {
            value: '',
            text: '全部',
          },
          {
            value: '0',
            text: '未开始',
          },
          {
            value: '1',
            text: '进行中',
          },
          {
            value: '2',
            text: '已完成',
          },
        ],
      ],
      matterList: [],
      itemList: [
        {
          name: '全部镇街',
          data: 1,
          desable: false,
        },
        {
          name: '全部社区',
          data: 2,
          desable: false,
        },
        {
          name: '全部状态',
          data: 3,
          desable: false,
        },
      ],
	  sysOrgCode: '',
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  mounted() {
    this.gethyDemand();
    this.queryTreeList();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    onChange(val, index,pid) {
	  if(index === 0 || index === 1){
		  this.sysOrgCode = val.split('|')[0];
	  }
      this.gethyDemand();
	  if(index === 0){
		  this.headerSelectGroup[1] = [];
		  var data = {
		  	pid: val.split('|')[1],
		  };
		  api.queryDepartTreeSync(data).then((e) => {
		  	if (e.data.code == 0) {
				let datas = e.data.result;
		  		datas.forEach((item) => {
		  		  let child = {
		  		    value: item.orgCode,
		  		    text: item.departName,
		  		  };
		  		  this.headerSelectGroup[1].push(child);
		  		});
		  	}
		  });
	  }
    },
    detail(item) {
      uni.navigateTo({
        url: '/pages/demand/demand?id=' + item.id,
      });
    },
    /**
     * 根据当前选中的状态获取相应的hyDemand列表。
     * 此函数用于初始化和更新matterList数据，展示特定状态下的需求列表。
     * @param {any} ev - 用于确定需求状态的值，此值来自于组件的绑定值。
     */
    gethyDemand(ev = {}) {
      let { status = 'init' } = ev;
      if (status == 'init') {
        this.pageNo = 1;
        this.matterList = [];
        this.finished = false;
      }
      // 初始化请求参数，包括分页信息和需求状态
      let data = {
        pageNo: this.pageNo,
        pageSize: 10,
        sysOrgCode: this.sysOrgCode,
        demandStatus: this.value[2],
      };
      this.loading = true;
      // 调用API获取需求列表
      api
        .hyDemandList(data)
        .then(({ data: e }) => {
          if (e.success) {
            switch (status) {
              case 'init':
                this.matterList = e.result.records;
                break;
              case 'pull':
                this.matterList.push(...e.result.records);
                break;
            }
            if (e.result.records.length < 10) {
              this.finished = true;
            }
            // console.log()
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取
    queryTreeList() {
      api.queryTreeList().then((e) => {
        let list = e.data.result;
        list.forEach((item) => {
          let child = {
            value: item.orgCode+'|'+item.id,
            text: item.departName,
          };
          this.headerSelectGroup[0].push(child);
        });
      });
    },
	onBottomingScroll() {
	  if (this.finished) return;
	  this.pageNo = Number(this.pageNo) + 1;
	  this.gethyDemand({ status: 'pull' });
	}
  },
  
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
}
.header-select {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 35px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  .home-items {
    position: relative;
    width: 50vw;
    height: 35px;
    line-height: 50px;
    font-weight: 700;
    color: #000;
    .up {
      position: absolute;
      display: inline-block;
      width: 0;
      height: 0;
      right: 20%;
      top: 30%;
      border-top: 10px solid transparent;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid #797979;
      border-radius: 5px;
    }
    .down {
      position: absolute;
      display: inline-block;
      width: 0;
      height: 0;
      right: 20%;
      top: 45%;
      border-top: 10px solid #797979;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-radius: 5px;
    }
  }
}
.home-content-list {
  padding: 10px;
  padding-bottom: 60px;
  .list {
    width: 95%;
    height: 120px;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px auto;
    display: flex;
    justify-content: space-around;
    padding: 5px;
    .list-content {
      width: 100%;
      height: 100%;
      .title {
        // font-weight: ;
      }
      .desc {
        height: 60upx;
        line-height: 30upx;
        font-size: 26upx;
        color: #666;
        display: -webkit-box; /* 使用Webkit的弹性盒子模型显示 */
        -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
        overflow: hidden; /* 隐藏超出的内容 */
      }
      .time {
        padding-top: 25upx;
        text-align: right;
        height: 26upx;
        font-size: 26upx;
      }
    }
  }
}
</style>
